angular.module('swiper-x', [])
.directive 'swiperX', ->
    restrict    : 'E'
    templateUrl : 'templates/swiper-x/swiper-x.html'
    scope:
        'items' : '=items'
    link: ($scope, $element, $attrs) ->
        eles = undefined
        elesSize = ->
            eles = $element.children().children().children().children()
            eles.length
        $scope.$watch elesSize, ->
#            console.log eles
            length = eles.length
#            console.log length
            $scope.animationEle = eles[length-1]
            $scope.itemsWidth = _.map eles,(ele) ->
#                console.log getComputedStyle(ele).width
                parseFloat getComputedStyle(ele).width.split('p')
#            console.log '$scope.itemsWidth',$scope.itemsWidth[0]
            $scope.animationEle.style.width = $scope.itemsWidth[0] + 'px'
        $scope.pick = (i)->
#            alert 123
            left = _.reduce $scope.itemsWidth[0...i],((memo,ele) -> memo + ele),0
            $scope.animationEle.style.left = left+'px'
            $scope.animationEle.style.width = $scope.itemsWidth[i] + 'px'
            $scope.items[i].func(i)


